<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>部标附加定义</title>
    <link rel="shortcut icon" href="./favicon.ico" />
    <link rel="stylesheet" href="dist/styles/iview.css">
    <style>
        html,
        body,
        #app {
            width: 100%;
            height: 100%;
            box-sizing: border-box;
            overflow: hidden;
        }
        
        [v-cloak] {
            display: none;
        }
    </style>
</head>

<body>
    <div id="app">
        <div style="padding:10px">
            <i-table size="small" border :columns="columns" :data="tableData" :height="tableHeight" :loading="loading"></i-table>
        </div>
    </div>
    <script src="dist/vue.min.js"></script>
    <script src="dist/iview.min.js"></script>
    <script src="./js/config.js"></script>
    <script src="js/gps51-jquery.js"></script>
    <script src="js/dateformat.js"></script>
    <script src="./js/util.js"></script>

    <script>
        new Vue({
            el: '#app',
            data: {
                loading: false,
                tableHeight: window.innerHeight - 20,
                columns: [{
                    title: '附加Id',
                    key: 'id',
                    width: 100,
                }, {
                    title: '长度',
                    key: 'length',
                    width: 80,
                }, {
                    title: '说明',
                    key: 'mark'
                }, {
                    title: '例子',
                    key: 'example'
                }, ],
                tableData: [],
            },
            methods: {
                init: function() {
                    var me = this;
                    me.loading = true;
                    utils.sendAjax(myUrls.queryJt808Add(), {}, this.doQueryJt808Add, function() {
                        me.loading = false;
                    });
                },
                doQueryJt808Add: function(resp) {
                    this.loading = false;
                    this.tableData = resp.records ? resp.records : []
                }
            },
            mounted: function() {
                var me = this;
                window.onresize = function() {
                    me.tableHeight = window.innerHeight - 20;
                }
                me.init();
            }
        })
    </script>
</body>

</html>